{% extends "base.html" %}
{% load staticfiles %}

{% block title %}自成交配置管理{% endblock %}

{% block content %}
    <!--上传策略模态框-->
    <div class="modal fade" data-backdrop="static" id="add_modal_selftrade" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新增自成交配置</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div style="margin-top:3%; display: block">
                            <label>交易通道</label>
                            <select name="channelid" id="channelid" class="opts">
                                <option value=""></option>
                                {% for item in channel_list %}
                                    <option value="{{ item.channelid }}">{{ item.channelid }}</option>
                                {% endfor %}
                            </select>
                            <div id="channelid_spaninfo" class="input-validation"></div>
                        </div>
                        <div id="divAM_info" style="color: red"></div>
                        <div style="height: 20px; display: block">
                            <div style="padding-left:120px; float: left;">
                                <span class="btn-cancel btn-stc" onclick="add_modal_hide()">取消</span>
                            </div>
                            <div style="padding-left:5px;float: left;">
                                <span class="btn-confirm btn-stc" id="aORmFlag" aORmFlag="" onclick="addORmodify_DB()">提交</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 交易通道删除确认模态框 -->
    <div class="modal fade" data-backdrop="static" id="modal_delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">删除交易通道确认</h4>
                </div>
                <div class="modal-body">
                    <div style="margin-top:3%; display: block" id="confirm_paper">
                    </div>
                    <div style="height: 30px; display: block;margin-top: 20px">
                        <div style="padding-left:120px; float: left;">
                            <span class="btn-cancel btn-stc" onclick="del_modal_hide()">取消</span>
                        </div>
                        <div style="padding-left:5px; float: left;">
                            <span id="del" sid="" class="btn-confirm btn-stc" onclick="del_DB()">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--提示成功/失败模态框-->
    <div class="modal fade" data-backdrop="static" id="res_info">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="resinfo_title">删除</h4>
                </div>
                <div class="modal-body">
                    <div>
                        <p id="resinfo_content" class="operat-success">删除成功！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main content -->
    <body>
    <section>
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                <li class="active" style="margin-top:10px"><a href="#fa-upload" onclick="tabs(0)"
                                                              data-toggle="tab">自成交配置管理</a></li>
            </ul>
            <div class="tab-content">
                <!--上传列表-->
                <div class="tab-pane active" id="fa-upload">
                    <div class="div-query">
                        <div class="lbl-query">
                            <button class="btn-add" onclick="add_modal_show()">新增</button>
                        </div>
                    </div>
                    <table class="table-stc" id="SelfTradeConfig"></table>
                </div>
            </div>
        </div>
    </section>
    </body>
{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        //get请求+搜索
        $(function () {
            selftradesearch()
        })

        //tab标签页
        function tabs(n) {
            if (n == 0) {
                selftradesearch();
                $('#fa-upload').addClass('active');
                $('#fa-pack').removeClass('active');
                $('#fa-sim').removeClass('active');
            }
        }


        //自成交配置管理的查询+搜索
        function selftradesearch() {
            //有查询条件,查询
            //无查询条件,get请求页面初始数据
            $.post("{% url 'Manager:selftrade' %}", {'selftrade_search': 1}, function (r) {
                $("#SelfTradeConfig").bootstrapTable("destroy").bootstrapTable({
                    height: 600,
                    columns: [
                        {
                            field: 'channelid',
                            title: '交易通道',
                        }, {
                            field: 'selftradeoption',
                            title: '操作',

                            formatter: function (value, row, index) {
                                return "<span onclick=\"modify_field_show('" + value + "')\" type='button' class='btn btn-success btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 修改</span> " + "&nbsp;<span onclick=\"del_modal_show('" + value + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 删除</span> ";


                            }
                        },
                    ],
                    data: r,
                    // height: 600,
                    //******前端分页设置****
                    pagination: true,
                    pageNumber: 1,
                    pageSize: 20,
                    pageList: [10, 20, 50, 100],
                    paginationHAlign: "right",
                    paginationDetailHAlign: "none"
                    //******前端分页设置****
                });
            });

        }

        //删除，lable标签的onclick时间显示删除模态框，此框中有确认和取消按钮，取消：隐藏模态框；确认：发送post请求到后台删除数据；
        //1.显示模态框
        function del_modal_show(id) {
            $('#modal_delete').modal('show');
            $('#confirm_paper').text('确认删除交易通道"' + id + '"吗？');
            $('#del').attr('sid', id);
            $('.modal-title').text('删除自成交配置');
        }

        //2.取消
        function del_modal_hide() {
            $('#modal_delete').modal('hide');

        }

        //3.确认删除
        function del_DB() {
            d = $('#del').attr('sid');
            $.post("{% url 'Manager:selftrade' %}", {'id': d, 'del_DB': 1}, function (r) {
                if (r) {
                    $("#SelfTradeConfig").bootstrapTable("destroy").bootstrapTable({
                        height: 600,
                        columns: [
                            {
                                field: 'channelid',
                                title: '交易通道',
                            }, {
                                field: 'selftradeoption',
                                title: '操作',

                                formatter: function (value, row, index) {
                                    return "<span onclick=\"modify_field_show('" + value + "')\" type='button' class='btn btn-success btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 修改</span> " + "&nbsp;<span onclick=\"del_modal_show('" + value + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 删除</span> ";


                                }
                            },
                        ],
                        data: r,
                        // height: 600,
                        {#width: 100,#}
                        //******前端分页设置****
                        pagination: true,
                        pageNumber: 1,
                        pageSize: 20,
                        pageList: [10, 20, 50, 100],
                        paginationHAlign: "right",
                        paginationDetailHAlign: "left"
                        //******前端分页设置****
                    })
                    $("#modal_delete").modal("hide")
                    $("#delete_success").modal("show");
                    setTimeout(function () {
                        $("#delete_success").modal("hide");
                    }, 2000)
                } else {
                    $("#msg_delete").text("服务器错误！")
                    $("#delete_success").modal("show");
                    setTimeout(function () {
                        $("#delete_success").modal("hide");
                    }, 2000)
                }
            });
        };


        //新增，lable标签的onclick事件显示新增模态框，此框中有确认和取消按钮，取消：隐藏模态框；确认：发送post请求到后台新增数据；
        //1.显示模态框
        function add_modal_show() {
            $('#add_modal_selftrade').modal('show');
            $('.modal-title').text('新增自成交配置');
            $("select").val("");
            $("#aORmFlag").attr('aORmFlag','add');
        }

        //2.取消
        function add_modal_hide() {
            $('#add_modal_selftrade').modal('hide');
            $("select").val("");
            $('#channelid_spaninfo').text('');
            $('#divAM_info').text('');
        }

        //3.确认添加
        function addORmodify_DB() {
            var channelid = $('#channelid').val();
            aORmFlag = $("#aORmFlag").attr('aORmFlag');
            if (channelid.length === 0) {
                $('#channelid_spaninfo').text('交易通道不能为空');
                return;

            }
            $.post("{% url 'Manager:selftrade' %}", {'channelid': channelid, 'addORmodify_DB': 1,'aORmFlag':aORmFlag}, function (r) {
                if(r==='ae'||r==='me'){
                    $("#divAM_info").text('数据已存在，无须新增/修改。')
                    return;
                }
                else if (r) {
                    $("#SelfTradeConfig").bootstrapTable("destroy").bootstrapTable({
                        height: 600,
                        columns: [
                            {
                                field: 'channelid',
                                title: '交易通道',
                            }, {
                                field: 'selftradeoption',
                                title: '操作',

                                formatter: function (value, row, index) {
                                    return "<span onclick=\"modify_field_show('" + value + "')\" type='button' class='btn btn-success btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 修改</span> " + "&nbsp;<span onclick=\"del_modal_show('" + value + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-trash'></i> 删除</span> ";


                                }
                            },
                        ],
                        data: r,
                        // height: 600,
                        //******前端分页设置****
                        pagination: true,
                        pageNumber: 1,
                        pageSize: 20,
                        pageList: [10, 20, 50, 100],
                        paginationHAlign: "right",
                        paginationDetailHAlign: "none"
                        //******前端分页设置****
                    });
                    $("#add_modal_selftrade").modal("hide");
                    $("#res_info").modal("show");
                    $('#resinfo_title').text('新增/修改自成交配置');
                    $('#resinfo_content').text('新增/修改自成交配置成功！');
                    setTimeout(function () {
                        $("#res_info").modal("hide");
                    }, 2000)
                } else {
                    $("#resinfo_title").text("操作失败");
                    $("#resinfo_content").text("服务器错误！");
                    $("#res_info").modal("show");
                    setTimeout(function () {
                        $("#res_info").modal("hide");
                    }, 2000)
                }
            });


        }

        //4.修改时显示字段值，修改与新增唯一的不同是修改时显示字段值
        function modify_field_show(id) {
            $('#aORmFlag').attr('aORmFlag','modify');
            $('#add_modal_selftrade').modal('show');
            $('.modal-title').text('修改自成交配置');
            $("select").val("");
            $.get("{% url 'Manager:selftrade' %}", {'modify_channelid': id}, function (r) {
                if (r) {
                    var data = (r.rows)[0]
                    for (var key in data) {
                        console.log(key);
                        console.log(data[key], typeof data[key]);
                        if ($('#' + key)) {
                            $('#' + key).val(data[key]);
                        }

                    }
                }
            });
        };


    </script>
    <style>
        {#加载数据时的样式#}
        .bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
            align-items: center;
            background: #141414;
            display: none;
            justify-content: center;
            position: absolute;
            bottom: 0;
            width: 100%;
            z-index: 1000;
        }
    </style>

{% endblock %}